import React from 'react'
import { useHistory } from 'react-router-dom'
// ================================================================ Image
import Bcimg from '@img/collect/bcimage.png'
import Image from '@tp/image'
import Logo from '@img/collect/logo.png'

const {$fn} = window
// ================================================================ Plugin 

// ================================================================ View 
const Index = ( ) => {
	const [ userData, setUserData ] = React.useState({})
	const history = useHistory( )
	/* --------------------------- 初始化 --------------------------- */
	React.useEffect(()=>{
		const userData = $fn.local('userData')
		setUserData(userData)
	}, [ history ])
	/* --------------------------- 动态初始化 --------------------------- */
	React.useEffect(()=>{
		
	}, [ ])
	
	return (
		<>
			<div className='wh plr10 pb20 fv' style={{background:`url(${Bcimg}) no-repeat top center/100%`, paddingTop:'18%'}}>
				<div className='ex oys'>
					<div className='bcf r8px plr10' >
						<h5 className='b f16 lh28 pt5' style={{letterSpacing:'2px'}}>基本信息</h5>
						<ul>
							<li className='fxmj g6 mt10 h20'>
								<h5 className='' style={{letterSpacing:'2px'}}>姓名</h5>
								<p className='f16 b'>{userData.uname}</p>
							</li>
							<li className='fxmj g6 mt10 h20'>
								<h5 className='' style={{letterSpacing:'2px'}}>证件号</h5>
								<p className='b f16'>{userData.ucardno}</p>
							</li>
							<li className='fxmj g6 mt10 h20'>
								<h5 className='' style={{letterSpacing:'2px'}}>年龄</h5>
								<p className='b f16'>{userData.uage}</p>
							</li>
							<li className='fxmj g6 mt10 h20'>
								<h5 className='' style={{letterSpacing:'2px'}}>性别</h5>
								<p className='b f16'>{+userData.usex === 0 ? '女' : '男'}</p>
							</li>
							<li className='fxmj g6 mt10 h20'>
								<h5 style={{letterSpacing:'2px'}}>手机号</h5>
								<p className='b f16'>{userData.uphone}</p>
							</li>
							<li className='fxmj g6 mt10 h20'>
								<h5 style={{letterSpacing:'2px'}}>备注</h5>
								<p className='b f16'>{userData.remark}</p>
							</li>
							{/* <li className='fxmj g6 mt10'>
								<h5 className='' style={{letterSpacing:'2px'}}>地址</h5>
								<p>{}</p>
							</li> */}
							
							<li className='ex r8px fv mt25' style={{justifyContent:'center',alignItems:'center'}}>
								<Image src={userData.qrcode} size={'50%'} width={'50%'} />
								<p className='b f28 tc mtb5 h40 r3px' style={{color:'red',width:'120px'}}>{userData.check_code}</p>
							</li>
							{/* <li className='fxmj mt20 tbor1'>
								<h5 className='b'>您的确认码</h5>
								<div className='fxmc'>
									<p className='b f28 tc mt10 h40 r3px' style={{color:'red',width:'120px'}}>{userData.check_code}</p>
								</div>
							</li>*/}
						</ul>
						
					</div>
					
				</div>
				{/* 
					<div className='bcf r8px p10 mt10'>
						<h5 className='b tc mb5' style={{letterSpacing:'2px'}}>条形码</h5>
						<Image src={userData.barcode} width={200} style={{margin:'0 auto'}} />
					</div>
				*/}
				<footer className='fxmc pt10'>
					<Image src={Logo} width={100} />
				</footer>
			</div>
		</>
	)
}
export default Index